<template>
    <div class="clauses" :class="classNames">
        <div class="cell" v-if="item.type=='text'">
            <p class="text">{{item.content}}</p>
        </div>
        <div class="cell" v-if="item.type=='img'">
            <img class="pic" :src="item.content" :alt="item.title">
        </div>
        <div class="cell" v-if="item.type=='decorate'" v-html="item.content">
        </div>
        <div class="cell" v-if="item.type=='input'">
            <p class="text">{{item.content}}</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data(){
            return {}
        },
        computed: {
            classNames(){
                let list = [];
                let setting = this.item.setting;
                for (let key in setting) {
                    list.push(setting[key]);
                }
                return list;
            }
        },
        props: [
            'item'
        ]
    }
</script>


<style lang="scss">
    .clauses {
        p {
            margin: 0;
        }
        //center  left right
        &.center{
            text-align: center;
        }
        &.left{
            text-align: left;
        }
        &.right{
            text-align: right;
        }
        //small medium and large
        &.small{
            font-size: 14px;
            .pic{
                width: 160px;
            }
        }
        &.medium{
            font-size: 16px;
            .pic{
                width: 200px;
            }
        }
        &.large{
            font-size: 18px;
            .pic{
                width: 240px;
            }
        }

        .cell {
            margin: 5px 0;
            .dotted-line {
                width: 100%;
                height:10px;
                border-bottom: 1px dashed #000;
            }
            .pic {

            }
        }
    }
</style>
